<template>
    <div class="mmv-side-section">
        <slot name="body"></slot>
        <div class="mmv-side-section__header" v-if="hideHander===false">
            <h2 class="mmv-side-section__title">{{title}}</h2>
            <div class="mmv-side-section__link" v-if="to">
                <mmv-link :to="to" class="mmv-side-section__link" target="_blank">更多</mmv-link>
            </div>
        </div>
        <div class="mmv-side-section__body" v-if="hideBody===false">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        hideHander: {
            type: [Boolean, String],
            default: false,
        },
        hideBody: {
            type: [Boolean, String],
            default: false,
        },
        title: {
            type: String,
            default: "",
        },
        to: {
            type: String,
            default: "",
        },
    },
};
</script>

<style lang="less">
.mmv-side-section {
    background-color: #fff;
    border-radius: 4px;
    & + & {
        margin-top: 20px;
    }
    &__header {
        display: flex;
        height: 50px;
        border-bottom: 1px solid #ebebeb;
        padding: 0 20px;
        align-items: center;
    }
    &__body {
        position: relative;
        padding: 20px;
    }
    &__title {
        flex-grow: 1;
        font-size: 16px;
        font-weight: 600;
    }
    &__link,
    &__btn {
        color: #999;
        a {
            color: #999;
        }
    }
}
</style>
